<template>
  <div class="container">
    <div class="m-title">
      <span class="icon"></span>
      新建客户账户信息
    </div>
    <el-form
      ref="createNewAccountManagerRef"
      :rules="createNewAccountManagerRules"
      :model="createNewAccountManagerForm"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户名称:" prop="custName">
            <dic-customer-select
              :value="createNewAccountManagerForm.custName"
              title="选择客户"
              size="50%"
              ref="custNameRef"
              @inLoadAjax="custNamehandel"
            >
              <!-- 表单 -->
              <el-form
                :inline="false"
                label-width="80px"
                :model="custNameformData"
                ref="custNameFormRef"
              >
                <el-row :gutter="10">
                  <el-col :span="10">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="客户编码"
                        class="u-ipt"
                        prop="STAFF_CODE"
                      >
                        <el-input
                          placeholder=""
                          v-model="custNameformData.oldPartyCode"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="grid-content bg-purple">
                      <el-form-item
                        label="客户名称"
                        class="u-ipt"
                        prop="STAFF_NAME"
                      >
                        <el-input
                          placeholder="请输入内容"
                          v-model="custNameformData.custName"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>

                  <el-col :span="4">
                    <el-button
                      type="primary"
                      size="small"
                      @click="querycustName"
                      >查询</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
              <DicTable
                ref="commonRegionTable"
                stripe
                max-height="400"
                highlight-current-row
                :columnData="custNameColumns"
                :tableData="custNameTableData"
                :loading="custNameTableLoading"
                :currentPage="custNameTablePage.pageIndex"
                :pageSize="custNameTablePage.pageSize"
                :pager="true"
                :totalResult="custNameTablePage.rowCount"
                @current-change="custNameCurrentChangeEvent"
                @on-page-change="custNameHandlePageChange"
              >
              </DicTable>
            </dic-customer-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账户名称:" prop="acctName">
            <el-input v-model="createNewAccountManagerForm.acctName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账户类型:">
            <el-select
              v-model="createNewAccountManagerForm.acctBillingType"
              @change="acctBillingTypeChange"
              class="m-select"
            >
              <el-option
                v-for="item in selectInfo[0].val"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码:">
            <el-input v-model="createNewAccountManagerForm.postCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账单投递方式:">
            <el-select
              v-model="createNewAccountManagerForm.billPostType"
              @change="billPostTypeChange"
              class="m-select"
            >
              <el-option
                v-for="item in selectInfo[1].val"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账单邮递地址:">
            <el-input
              v-model="createNewAccountManagerForm.postAddress"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行名称:">
            <el-input v-model="createNewAccountManagerForm.bankName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行帐号:">
            <el-input
              v-model="createNewAccountManagerForm.paymentAccount"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户描述:">
            <el-input
              type="textarea"
              v-model="createNewAccountManagerForm.accountDesc"
              :autosize="{ minRows: 2, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:">
            <el-input
              type="textarea"
              v-model="createNewAccountManagerForm.remark"
              :autosize="{ minRows: 2, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-c m-btn-box">
      <el-button @click="cancelHandel">返回</el-button>
      <el-button type="primary" @click="saveAdddCustAccountHandel">保存</el-button>
    </div>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import DicCustomerSelect from "@/components/customer/form/DicCustomerSelect";
import CreateNewAccountManager from "@/api/customer/CreateNewAccountManager";
import { mapState } from "vuex";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    DicCustomerSelect,
    DicTable,
    mapState,
  },
  // 这里存放数据
  data() {
    return {
      // 下拉框的取值
      selectInfo: [
        {
          flag: "acct_billing_type", //直管类型
          val: [],
        },
        {
          flag: "bill_post_type", //改名改证件直管类型
          val: [],
        },
      ],
      // 账户类型 arr
      acctBillingTypeArr: [
        {
          code: "",
          name: "请选择",
        },
        {
          code: "10260001",
          name: "普通账户",
        },
        {
          code: "10260002",
          name: "专用账户",
        },
      ],
      createNewAccountManagerForm: {
        //   账户名称
        acctName: "",
        //   客户名称-保存的时候不需要传递
        custName: "",
        // 客户主键-当选择客户的时候用来存放选择客户的custId
        custId: "",
        // 营销责任地编码
        commonRegionId: "",

        // 账户名称
        acctName: "",
        // 账户类型
        acctBillingType: "",
        // 邮政编码
        postCode: "",
        // 账单投递方式
        billPostType: "",
        // 银行名称
        bankName: "",
        // 银行账号
        paymentAccount: "",
        // 账单邮递地址
        postAddress: "",
        //账户描述
        accountDesc: "",
        // 备注
        remark: "",

        commonregionId: "",
      },
      // 校验规则
      createNewAccountManagerRules:{
        custName:[
           {  required: true, message: "请输入客户名称",trigger: "change" },
        ],
        acctName:[
           {  required: true, message: "请输入账户名称", trigger: ["blur","change"] }
        ]
      },
      //  客户名称-表单
      custNameformData: {
        // 客户编码
        oldPartyCode: "",
        // 客户名称
        custName: "",
      },
      custNameColumns: [
        { field: "oldPartyCode", title: "客户编码" },
        { field: "custName", title: "客户名称" },
      ],
      custNameTableData: [],
      custNameTableLoading: false,
      // 营销责任地分页
      custNameTablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
        pageCount: 0
      },
    };
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {
    this.$nextTick(function () {
      this.initValue();
    });
  },
  // 方法集合
  methods: {
    // 直管类型初始化
    async initValue() {
      let response = "";
      this.selectInfo.forEach(async (item, index) => {
        response = await CreateNewAccountManager.initValue({ flag: item.flag });
        if (response.code == 200) {
          this.selectInfo[index].val = response.meta.customers;
        }
      });
      
    },
    custNamehandel(){
      this.custNameTablePage.pageIndex=1;
      this.custNameTablePage.pageSize=5;
      this.$nextTick(() => {
        this.$refs.custNameFormRef.resetFields();
      });

      this.custNameAjax();
    },
    // 客户名称初始化服务
    async custNameAjax() {
      let params = {
        searchFlag: "1",
        empeeId: this.user.staffId,
        custName: this.custNameformData.custName,
        custNameType: "2",
        oldPartyCode: this.custNameformData.oldPartyCode,
        oldPartyCodeType: "2",
        pageIndex: this.custNameTablePage.pageIndex,
        pageSize: this.custNameTablePage.pageSize,
      };
      let result = await CreateNewAccountManager.getCustListJson(params);
      if (result.code == 200) {
        let res = result.meta;
         this.custNameTableData = res.customers || [];
          this.custNameTablePage.rowCount = Number(res.pageInfo.rowCount);
          this.custNameTablePage.pageCount == Number(res.pageInfo.pageCount);
      }
    },
    //客户名称-弹窗-ajax
    custNameCurrentChangeEvent(val) {
      
      this.createNewAccountManagerForm.custName = val.row.custName;
      this.createNewAccountManagerForm.custId = val.row.custId;
      this.createNewAccountManagerForm.commonregionId = val.row.regionId;
      this.createNewAccountManagerForm.postAddress = this.isNull(val.row.custAddr)
      // 后面逻辑需要在处理 目前账户名称先等于客户名称
      this.createNewAccountManagerForm.acctName = val.row.custName;
      this.$refs.custNameRef.drawer = false;
      this.$nextTick(() => {
        this.$refs.custNameFormRef.resetFields();
      });
    },
    // 客户名称-分页
    custNameHandlePageChange(val) {
      this.custNameTablePage.pageIndex = val.currentPage;
      this.custNameTablePage.pageSize = val.pageSize;
      this.custNameAjax()
    },
    // 客户查询
    querycustName() {
      this.custNameAjax();
    },
    // 取消
    cancelHandel() {
      this.$router.push({
        path: "/custAccountManager",
        query: {
        },
      });
    },
//新建账户-保存-点击事件
    saveAdddCustAccountHandel(){
      this.$refs.createNewAccountManagerRef.validate((valid) => {
        if (valid) {
          this.saveAdddCustAccount()
        } else { 
          return false;
        }
     });
    },
    //新建账户-保存
    async saveAdddCustAccount() {
      let params = {
        acctName: this.createNewAccountManagerForm.acctName,
        custId: this.createNewAccountManagerForm.custId,
        accountDesc: this.createNewAccountManagerForm.accountDesc,
        staffId: this.user.staffId,
        remark: this.createNewAccountManagerForm.remark,
        acctBillingType: this.createNewAccountManagerForm.acctBillingType,
        billPostType: this.createNewAccountManagerForm.billPostType,
        postAddress: this.createNewAccountManagerForm.postAddress,
        postCode: this.createNewAccountManagerForm.postCode,
        bankName: this.createNewAccountManagerForm.bankName,
        paymentAccount: this.createNewAccountManagerForm.paymentAccount,
        commonRegionId: this.createNewAccountManagerForm.commonregionId,
      };
      let result = await CreateNewAccountManager.createAccount(params);
      if (result.code == 200) {
        if(result.meta.resultCode == 0){
          this.$confirm("信息保存成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
            center: true,
            showCancelButton: false,
          })
            .then(() => {
              this.$router.push({
                path: "/custAccountManager",
              });
            })
            .catch(() => {});
        }else {
          this.$message({
            showClose: true,
            message: result.meta.resultMsg,
            type: 'error'
          });
        }
      }
    },
    // 账户类型-下拉框
    acctBillingTypeChange(val) {
      
    },
    // 账单投递方式
    billPostTypeChange(val) {
      
    },
    // 判断值是否存在
    isNull(val) {
      if (
        val == "NaN" ||
        val == "null" ||
        val == "undefined" ||
        val == undefined
      ) {
        return (val = "");
      } else {
        return val;
      }
    },
  },

  // 监控data中的数据变化
  watch: {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {},
  // 生命周期 - 数据挂载之前
  beforeMount() {},
  // 生命周期 - 数据更新之前
  beforeUpdate() {},
  // 生命周期 - 数据更新之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁完成
  destroyed() {},
};
</script>

<style scoped>
.container {
  padding: 0.2rem;
  background-color: #fff;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.m-select {
  width: 100%;
}
.m-btn-box {
  padding: 0.2rem;
  text-align: center;
}
</style>